<template>
	<view class="shop-location">
		<!-- 地理位置 -->
		<view class="user-location-box" @click="tirggerLoc">
			<u-icon color="gray" size="28" name="map"></u-icon>
			<view style="width: 380rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
				{{locName == ''?'请选择位置':locName}}
			</view> 
		</view>
		<view style="padding: 10rpx 40rpx 20rpx 40rpx;background-color: #FFFFFF;">
			<u-search placeholder="请输入搜索内容" v-model="search.key" @clear="removeSearch" @custom="getSearch()"></u-search>
		</view>	
		<view style="width: 100vw; margin-top: 0rpx;">
			<u-dropdown ref="uDropdown" >
				<u-dropdown-item :title="search.province == null?'请选择':search.province">
				</u-dropdown-item>
				<u-dropdown-item :title="search.city == null?'请选择':(search.city == ''?'全部':search.city)">
				</u-dropdown-item>
				<u-dropdown-item :title="search.area == null?'请选择':(search.area == ''?'全部':search.area)">
				</u-dropdown-item>
				<Linkage @conceal="conceal1" ></Linkage>
			</u-dropdown>
		</view>
		
		
		<scroll-view class="shop-list-one scroll-Y" :scroll-top="scrollTop" scroll-y="true"  @scrolltolower="lower">
			<u-empty v-if="dataNull" text="数据为空" mode="list"></u-empty>
			<view @click="goShopPage(items)" class="title-project-body-title" v-for="(items, index) in shopList"
				:key="index" :style="index == shopList.length - 1?'':'border-bottom: 1rpx solid #E5E5E5;'"
				>
				<image :src="items.logo" mode="scaleToFill"
					style="width: 120rpx; height: 120rpx; border-radius: 10rpx;"></image>
				<view class="order-info-text" style="margin-top: 10rpx; margin-left: 20rpx; margin-right: 50rpx;">
					<view style="font-size: 28rpx; font-weight: 500; color: #000000;">
						{{items.shopName}}
					</view>
					<view style="font-size: 24rpx; color: gray; ">
						主营：{{items.synopsis}}
					</view>
					<view style="font-size: 24rpx; color: gray;">
						地址：{{items.address == null?'无详细地址描述':items.address}}
					</view>
				</view>
				<view class="card-money-box">
					<!-- <view v-if="productMap.linePrice != productMap.price"
						style="font-size: 24rpx; font-weight: bold; text-decoration: line-through; color: gray;">
						￥{{productMap.linePrice}}
					</view> -->
					<view class="">
						<image src="../../../static/image/address.png" style="width: 35rpx; height: 35rpx;" mode="">
						</image>
					</view>
					<view style="font-size: 24rpx; white-space: nowrap; color: green;">
						{{items.distance.toFixed(2)}} km
					</view>
				</view>
			</view>
			<u-divider style="margin-top: 30rpx;" v-if="isShowNull == true" half-width="200"   border-color="#6d6d6d">没有更多了</u-divider>
		</scroll-view>
		
	</view>
	
</template>

<script>
	import Linkage from '@/components/linkage/linkage.vue'
	export default {
		components: {
			Linkage
		},
		data() {
			return {
				dataNull: false,
				//查询条件
				search: {
					page: 1,
					size: 20,
					key: '',  // 搜索词
					location: '', // 位置
					province: null, // 省
					city: null, // 市
					area: null, // 区
				},
				// 上拉
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 渲染的列表数据
				shopList: [],
				// 中文地址
				locName: '',
				// 选择位置经度
				longitude: '',
				// 选择位置纬度
				latitude: '',
				// 是否还可以下拉刷新
				isScroll: true,
				// 显示没有数据分割条
				isShowNull: false,
				// 搜索条件
				title1: '',
			}
		},
		onShow() {
			
			
		},
		onLoad() {
			let that = this
			// 通过经纬度反译出中文地址
			let location = uni.getStorageSync('location') || "23.035604291647157,113.29560753736499"
			that.search.location = location 
			uni.request({
				url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + location + '&key=GGCBZ-SRZ6W-VE7RY-RTYLQ-HOHF3-IDB6C',
				success: res => {
					console.log(res);
					// 获取中文地址
					that.locName = res.data.result.address
				}
			})
			that.getAllShopLocal(that.search)
			
		},
		methods: {
			// 点击搜索
			getSearch() {
				if(this.search.location != ''){
					this.getAllShopLocal(this.search)
				}
				else{
					uni.showToast({
						title: '请先选择位置'	,
						icon: 'error'
					})
				}
			},
			// 清空搜索
			removeSearch() {		
				this.reset()
				if(this.search.location != ''){
					this.getAllShopLocal(this.search)
				}
				else{
					
				}
			},
			// 重置条件
			reset(){
				this.search.page = 1
				this.search.size = 20
				this.search.key = ''
			},

			// 根据经纬度查询附近店铺 localtion: 22.5486,113.5486
			getAllShopLocal(param){
				this.$api.request.searchHomeShop(param, res => {
					console.log(res);
					if (res.code == 200) {						
						this.shopList = res.data.hotels
						this.dataNull = res.data.hotels.length > 0?false:true
						// 如果总数大于分页数，则可以下拉刷新
						if(res.data.total > this.search.page * this.search.size){
							this.isScroll = true
							this.isShowNull = false
						}else {
							this.isScroll = false
							if(res.data.total <= 5){
								this.isShowNull = false
							}else{
								this.isShowNull = true
							}
						}
					}
				})
			},
			// 滑动触底事件
			lower: function(e) {
				if(this.isScroll == true){
					this.search.page += 1
					this.$api.request.searchHomeShop(this.search, res => {
						console.log(res);
						if (res.code == 200) {
							this.shopList = [...this.shopList, ...res.data.hotels]
							// 如果总数大于分页数，则可以下拉刷新
							if(res.data.total > this.search.page * this.search.size){
								this.isScroll = true
								this.isShowNull = false
							}else {
								this.isScroll = false
								this.isShowNull = true
							}
						}
					})
				}else{
					if(this.shopList.length <= 5){
						this.isShowNull = false
					}else{
						this.isShowNull = true
					}
					uni.showToast({
						title: '没有更多了',
						icon: 'none'
					})
				}
			},
			
			// 点击店铺进入店铺页面
			goShopPage(item) {
				uni.navigateTo({
					url: '/pages/sys/home/store?id=' + item.id
				})
			},
			
			// 省市区条件
			conceal1(param) {
			    const {chooseprovince, choosecity, choosearea} = param
				console.log(param);
			    // 获取到传过来的 省 市 区 县数据
			    // this.title1 = chooseprovince + choosecity + choosearea
				this.search.province = chooseprovince
				this.search.city = choosecity
				this.search.area = choosearea
			    if(choosecity == '全部'){
			        this.succeed()
			    }else if(choosearea != ''){
			        this.succeed()
			    }
			},
			//筛选框关闭
			succeed(){
				this.getSearch()
			    this.$refs.uDropdown.close();
			},


			// 切换位置 
			tirggerLoc() {
				const that = this
				// 获取用户授权情况
				uni.getSetting({
					success: resp => {
						console.log(resp.authSetting['scope.userLocation']);
						if(!resp.authSetting['scope.userLocation']){
							// 授权定位
							uni.getLocation({
								type: 'wgs84',
								success: function(respp) {
									console.log("当前位置的经度：" + respp.longitude);
									console.log("当前位置的纬度：" + respp.latitude);
									that.reset()
									that.locName = respp.address
									uni.setStorageSync('location', respp.latitude + "," + respp.longitude)
									that.search.location = respp.latitude + "," + respp.longitude
									that.getAllShopLocal(that.search)
								},fail(err) {
									uni.showModal({
										title: '',
										content: '请在系统设置中打开定位服务,开启后需要授权才能使用地图功能',
										confirmText: '确定',
										success: function (res) {
											uni.openSetting({
												success(auth) {
													 if (auth.authSetting['scope.userLocation']) {
													      // 授权成功，重新定位
													      uni.getLocation({
													        success: location => {
																that.reset()
																that.locName = location.address
																uni.setStorageSync('location', location.latitude + "," + location.longitude)
																that.search.location = location.latitude + "," + location.longitude
																that.getAllShopLocal(that.search)
															}
													      });
													    } else {
													      // 没有允许定位权限
													      uni.showToast({
													        title: '您拒绝了定位权限，将无法使用地图功能',
													        icon: 'none'
													      });
													    }
												}
											})
										}
									})
								}
							})
						}else {
							// 选择位置
							uni.chooseLocation({
								success: function (res) {
									console.log('位置名称：' + res.name);
									console.log('详细地址：' + res.address);
									console.log('纬度：' + res.latitude);
									console.log('经度：' + res.longitude);
									that.reset()
									that.search.location = res.latitude + "," + res.longitude
									that.locName = res.address
									that.getAllShopLocal(that.search)
								}
							});
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shop-location{
		width: 100vw;
		height: 100vh;
		// background: #FFFFFF;
	}
	
	.user-location-box{
		width: auto;
		display: flex;
		flex-direction: row;
		font-size: 28rpx;
		color: gray;
		padding: 0 30rpx;	
		margin-bottom: 20rpx;
	}
	
	.shop-list-one {
		width: auto;
		height: 80vh;
		padding: 0rpx 20rpx;
		background: #FFFFFF;
		// border-top: 1rpx solid gray;
		// border: 1rpx solid red;
	}
	
	.title-project-body-title {
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		// border-radius: 10rpx;
		// box-shadow: 2rpx 0rpx 4rpx 3rpx #c4c6c9;
		padding-bottom: 20rpx;
		margin-top: 30rpx;
	}
	
	.order-info-text {
		width: calc(100vw - 360rpx);
		display: flex;
		flex-direction: column;
	}
	
	.card-money-box {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-left: auto;
		margin-right: 20rpx;
		justify-content: center;
		align-items: center;
	}
	
	.total-amount-box {
		width: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		font-size: 28rpx;
		font-weight: 500;
		margin-right: 20rpx;
	}
	
	.u-flex::before{
		display: flex;
		flex-direction: row;
	}
</style>
